<template>
	<view class="box bg_f2">
		<view class="content hidden">
			<view class="wrapper">
				<view class="hidden">
					<view class="flex1 index_m2">
						<image :src="store_info.image_text[0]" mode="aspectFill" class="store_img" @click="previewImg()"></image>
						<view class="w_flex1">
							<view class="font_38 text_bold">{{store_info.store_name}}</view>
							<view class="font_31 color_7b index_m1">店铺ID：{{store_info.id}}</view>
						</view>
					</view>
					<view class="flex3 index_m3">
						<navigator url="/pages/merchant/account" class="w_flex1 text_center">
							<view class="font_35 text_bold">{{store_info.balance}}</view>
							<view class="font_23 color_ac index_m1">账号余额</view>
						</navigator>
						<view class="line"></view>
						<view class="w_flex1 text_center" @click="get_link">
							<view class="font_35 text_bold">{{store_info.orders_number}}</view>
							<view class="font_23 color_ac index_m1">本月订单</view>
						</view>
						<view class="line"></view>
						<view class="w_flex1 text_center">
							<view class="font_35 text_bold">{{store_info.total_balance}}</view>
							<view class="font_23 color_ac index_m1">累计收益</view>
						</view>
					</view>
				</view>
			</view>
			<view class="wrapper">
				<view class="flex7 business" :class="{'active': store_info.status == 1}">
					<view class="store_icon"></view>
					<view class="font_33 text_bold w_flex1">{{store_info.status == 1?'营业中': '关闭中'}}</view>
					<view style="font-size: 0;">
						<van-switch :checked="store_info.status == 1?true: false" size="23px" active-color="#FF6A00"
							inactive-color="#eee" @change="onChange" />
					</view>
				</view>
			</view>
			<view class="wrapper">
				<view class="hidden">
					<view class="font_33 text_bold index_m4">常用工具</view>
					<view class="flex2 index_m5">
						<view class="block" v-for="item in w_list1" :key="item.name">
							<view class="block_content" @click="get_ship(item)">
								<view class="block_num font_27 text_bold color_ff6a00"
									v-if="item.num && store_info.total_orders">{{store_info.total_orders}}</view>
								<view class="hidden">
									<image :src="item.icon"
										:style="'width: ' + item.w + 'height: ' + item.h + 'margin: ' + item.m"></image>
								</view>
								<view class="font_23 color_7b index_m1">{{item.name}}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="wrapper">
				<view class="hidden">
					<view class="font_33 text_bold index_m4">商家助手</view>
					<view class="flex2 index_m5">
						<view class="block" v-for="item in w_list2" :key="item.name">
							<view class="block_content" @click="get_ship(item)">
								<navigator open-type="exit" target="miniProgram" hover-class="navigator-hover"
									class="exit_btn" v-if="item.name === '退出登录'"></navigator>
								<view class="hidden">
									<image :src="item.icon"
										:style="'width: ' + item.w + 'height: ' + item.h + 'margin: ' + item.m"></image>
								</view>
								<view class="font_23 color_7b index_m1">{{item.name}}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 模态 -->
		<van-popup :show="show">
			<view style="padding: 60rpx 50rpx;text-align: center;">非店员，不可查看</view>
		</van-popup>
		<!-- 停止营业时间 -->
		<van-popup :show="is_time_show">
			<view class="modal_wrapper hidden">
				<view class="modal_top">
					<view class="font_35 text_bold index_m7">停止营业时间</view>
					<view class="font_31 flex3 van-hairline--bottom">
						<view class="text_bold w_flex1 time_block" @click="is_date_show = true;is_times_type = 1;">
							{{start_M_d?start_M_d: '请选择开始时间'}}
						</view>
						<view class="color_999 index_m6">至</view>
						<view class="text_bold w_flex1 time_block" @click="is_date_show = true;is_times_type = 2;">
							{{end_M_d?end_M_d: '请选择截止时间'}}
						</view>
					</view>
				</view>
				<view class="van-hairline--top font_31 modal_foot">
					<view class="van-hairline--right" @click="is_time_show = false;">取消</view>
					<view @click="get_time_sure">确定</view>
				</view>
			</view>
		</van-popup>
		<!-- 日期 -->
		<van-popup position="bottom" :show="is_date_show">
			<van-datetime-picker type="date" :value="currentDate" :min-date="minDate" :formatter="formatter"
				@cancel="is_date_show = false;" @confirm="get_time" />
		</van-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				role_id: '',
				show: false,
				is_time_show: false,
				start_M_d: '', // 开始时间
				end_M_d: '', // 结束时间
				is_times_type: 1, // 1-开始 2-结束
				is_date_show: false, // 日期选择
				currentDate: new Date().getTime(),
				minDate: new Date().getTime(),
				start_t: new Date().getTime(), // 开始时间戳
				end_t: new Date().getTime(), // 结束时间戳
				start_time: "", // 获取开始时间戳
				end_time: "", // 结束时间戳
				formatter(type, value) {
					if (type === 'year') {
						return `${value}年`;
					}
					if (type === 'month') {
						return `${value}月`;
					}
					if (type === 'day') {
						return `${value}日`;
					}
					return value;
				},
				store_info: {
					store_name: '--',
					id: '--',
					balance: '--',
					orders_number: '--',
					total_balance: '--',
					status: 2
				},
				w_list1: [{
					num: true,
					w: '37rpx;',
					h: '42rpx;',
					m: '0 auto;',
					name: '我的订单',
					url: './order',
					icon: '../../static/image/merchant/a@2x.png'
				}, {
					w: '44rpx;',
					h: '35rpx;',
					m: '4rpx auto;',
					name: '余额提现',
					url: './withdraw',
					icon: '../../static/image/merchant/b@2x.png'
				}, {
					w: '35rpx;',
					h: '42rpx;',
					m: '0 auto;',
					name: '提现记录',
					url: './tixian',
					icon: '../../static/image/merchant/c@2x.png'
				}],
				w_list2: [{
					w: '38rpx;',
					h: '42rpx;',
					m: '0 auto;',
					name: '意见反馈',
					url: '/pages/user/feedback?type=2',
					icon: '../../static/image/merchant/d@2x.png'
				}, {
					w: '35rpx;',
					h: '42rpx;',
					m: '0 auto;',
					name: '常见问题',
					url: '/pages/user/issue?type=2',
					icon: '../../static/image/merchant/e@2x.png'
				}, {
					w: '35rpx;',
					h: '35rpx;',
					m: '4rpx auto;',
					name: '店员列表',
					url: '/pages/merchant/shop_user',
					icon: '../../static/image/merchant/f@2x.png'
				}, {
					w: '40rpx;',
					h: '40rpx;',
					m: '0 auto;',
					name: '退出登录',
					icon: '../../static/image/merchant/g@2x.png'
				}]
			}
		},
		onShow() {
			let token = uni.getStorageSync('token');

			if (!token) {
				getApp().get_navigate_url('/pages/index/login');
			}

			if (token) {
				this.get_user_info();
			}
		},
		methods: {
      previewImg(){
        console.log('放大',this.store_info.image_text)
        uni.previewImage({
          urls: this.store_info.image_text,
          longPressActions: {
            itemList: ['发送给朋友', '保存图片', '收藏'],
            success: function(data) {
              console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
            },
            fail: function(err) {
              console.log(err.errMsg);
            }
          }
        });
        
      },
			get_link() {
				getApp().get_navigate_url('./order');
			},
			// 获取用户信息
			get_user_info() {
				this.$http.get(this.$api.getMemberInfo).then(res => {
					let role_id = res.data.role_id;
					this.role_id = role_id;
					// role_id  1 为店长 2为店员 0 为用户
					if (role_id == 0) {
						this.show = true;
						return
					}

					this.managerIndex();
				})
			},
			// 门店信息
			managerIndex(fn) {
				this.$http.get(this.$api.managerIndex).then(res => {
					this.store_info = res.data;

					if (fn) {
						fn(res.data);
					}
				})
			},
			// 验证 是否能关闭门店
			// checkCloseStore(fn) {
			// 	this.$http.post(this.$api.checkCloseStore, {
			// 		start_time: this.start_time,
			// 		end_time: this.end_time
			// 	}).then(res => {
			// 		if (fn) {
			// 			fn(res.data);
			// 		}
			// 	})
			// },
			// 营业 关闭
			onChange(e) {
				let s_ = e.detail;
				if (!s_) {
					this.is_time_show = true;
				} else {
					this.$http.get(this.$api.setOpen, {
						store_id: this.store_info.id,
					}).then(res => {
						getApp().get_msg('修改状态成功');
						this.managerIndex();
					})
				}
			},
			// 选择时间
			get_time(e) {
				this.is_date_show = false;
				
				if (this.is_times_type === 1) {
					this.start_t = e.detail;
					// 开始时间
					this.start_M_d = this.get_date(e.detail);

					if (Number(this.end_t) < Number(this.start_t)) {
						this.end_t = this.start_t;
						this.end_M_d = this.start_M_d;
					}
					// this.start_time = e.detail;
				}

				if (this.is_times_type === 2) {
					if (e.detail < this.start_t) return getApp().get_msg('请选择正确的时间');

					this.end_t = e.detail;
					this.end_M_d = this.get_date(e.detail);
					// this.end_time = e.detail;
				}
			},
			get_date(value) {
				var date = new Date(value);
				var Y = date.getFullYear();
				var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1);
				var D = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
				var h = date.getHours();
				var m = date.getMinutes();
				var s = date.getSeconds();

				if (this.is_times_type === 1) {
					// 开始时间
					this.start_y = Y;
				}

				if (this.is_times_type === 2) {
					// 结束时间
					this.end_y = Y;
				}

				return M + '月' + D + '日';
			},
			// 确定时间
			get_time_sure() {
				let self = this;
				
				if (!this.start_M_d) return getApp().get_msg('请选择开始时间');
				if (!this.end_M_d) return getApp().get_msg('请选择截至时间');
							
				this.is_time_show = false;
				
				this.$http.post(this.$api.checkCloseStore, {
					store_id: this.store_info.id,
					start_time: this.start_M_d,
					end_time: this.end_M_d
				}).then(res => {
					let count = res.data.orders_count;
					if(count){
						uni.showModal({
							title: '提示',
							content: '该时间段有' + count + '订单，是否确认停止营业？',
							success: function(res) {
								if (res.confirm) {
									self.get_data_setStatus();
								} else if (res.cancel) {
									console.log('用户点击取消');
								}
							}
						});
					}else{
						uni.showModal({
							title: '提示',
							content: '请确认在该阶段停止营业？',
							success: function(res) {
								if (res.confirm) {
									self.get_data_setStatus();
								} else if (res.cancel) {
									console.log('用户点击取消');
								}
							}
						});
					}
					// getApp().get_msg('修改状态成功');
					// this.managerIndex();
				})
				
				
				// let self = this;

				// if (!this.start_M_d) return getApp().get_msg('请选择开始时间');
				// if (!this.end_M_d) return getApp().get_msg('请选择截至时间');


				// this.checkCloseStore(function(res) {

				// 	let not_register_roder = res.orders_count;
				// 	console.log(not_register_roder);
				// 	if (not_register_roder != undefined && not_register_roder != null && not_register_roder == 0) {
				// 		this.get_data_setStatus();
				// 	}

				// 	if (not_register_roder != undefined && not_register_roder != null && not_register_roder != 0) {
				// 		uni.showModal({
				// 			title: '提示',
				// 			content: '该时间段有' + not_register_roder + '笔订单，是否确认停止营业？',
				// 			success: function(res) {
				// 				if (res.confirm) {
				// 					self.get_data_setStatus();
				// 				} else if (res.cancel) {
				// 					console.log('用户点击取消');
				// 				}
				// 			}
				// 		});
				// 	}
				// });
			},
			get_data_setStatus() {
				getApp().get_loading();
				this.$http.get(this.$api.setStatus, {
					store_id: this.store_info.id,
					start_time: this.start_M_d,
					end_time: this.end_M_d
				}).then(res => {
					// this.is_time_show = false;
					getApp().get_msg('修改状态成功');
					this.managerIndex();
				})
			},
			// 点击跳转
			get_ship(e) {
				if (e.name === '店员列表' && this.role_id != 1) return getApp().get_msg('暂无查看权限');

				getApp().get_navigate_url(e.url);
			}
		}
	}
</script>

<style lang="less">
	.index_m1 {
		margin: 13rpx 0 0 0;
	}

	.index_m2 {
		margin: 31rpx 29rpx 42rpx 29rpx;
	}

	.index_m3 {
		margin: 0 0 35rpx 0;
	}

	.index_m4 {
		margin: 31rpx 35rpx 20rpx;
	}

	.index_m5 {
		margin: 0 0 17rpx;
	}

	.index_m6 {
		margin: 0 30rpx;
	}

	.index_m7 {
		margin: 62rpx 0 45rpx;
	}

	.content {
		padding: 0 17rpx;
	}

	.wrapper {
		margin: 19rpx 0;
		border-radius: 12rpx;
		background-color: #fff;
	}

	.store_img {
		width: 115rpx;
		height: 115rpx;
		border-radius: 6rpx;
		margin-right: 23rpx;
		background-color: #f4f4f4;
	}

	.line {
		width: 1px;
		height: 67rpx;
		background-color: #D2D2D2;
	}

	.text_center {
		text-align: center;
	}

	.store_icon {
		width: 25rpx;
		height: 25rpx;
		border-radius: 50%;
		margin: 0 21rpx 0 29rpx;
		background-color: #eee;
	}

	.business {
		height: 108rpx;
		color: #ACACAC;
		padding: 0 23rpx 0 0;

		&.active {
			color: #000000;

			.store_icon {
				background-color: #00A416;
			}
		}
	}

	.block {
		display: flex;
		flex: 0 0 25%;
		flex-direction: column;
		align-items: center;

		.block_content {
			padding: 20rpx;
			position: relative;

			.exit_btn {
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				position: absolute;
			}

			.block_num {
				top: 4rpx;
				right: 24rpx;
				width: 35rpx;
				height: 35rpx;
				line-height: 35rpx;
				border-radius: 50%;
				border: 1px solid #FF6A00;
				position: absolute;
				text-align: center;
			}
		}
	}

	.box .van-popup--center {
		width: 615rpx;
		border-radius: 23rpx;
	}

	.modal_wrapper {
		text-align: center;

		.time_block {
			padding: 17rpx 0;
		}

		.modal_top {
			padding: 0 46rpx;
		}

		.modal_foot {
			display: flex;
			margin: 60rpx 0 0;

			view {
				flex: 1;
				height: 106rpx;
				display: flex;
				align-items: center;
				justify-content: center;

				&:last-child {
					color: #576B95;
				}
			}
		}
	}
</style>
